<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">

          <!--<a-col :md="8" :sm="24">
            <a-form-item label="手机号码">
              <a-input v-model="queryParam.mobile" placeholder="请输入"/>
            </a-form-item>
          </a-col>-->
          <a-col :md="8" :sm="24">
            <a-form-item label="用户id">
              <a-input v-model="queryParam.memberId" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24" v-action:other>
              <a-form-item allowClear label="商圈" >
                <a-select v-model="queryParam.companyId" v-decorator="[ 'companyId']"  @change="handleProvinceChange">
                  <a-select-option v-for="item in companys" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-action:other>
              <a-form-item label="类别">
                <a-select allowClear v-model="queryParam.categoryId" v-decorator="[ 'categoryId']">
                  <a-select-option v-for="category in categoryList" :key="category.id">{{category.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" v-action:other>
              <a-form-item label="商户">
                <a-select allowClear v-model="queryParam.merchantId" v-decorator="[ 'merchantId']">
                  <a-select-option v-for="item in merchantList" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="会员">
                <a-select allowClear placeholder="请选择" v-model="queryParam.memberState">
                  <a-select-option value="1">会员</a-select-option>
                  <a-select-option value="0">非会员</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="起始时间">
                <a-date-picker
                  format="YYYY-MM-DD"
                  v-model="queryParam.beginTime"
                  v-decorator="[ 'beginTime', {rules: [{ required: true }], initialValue: beginTime} ]"
                  placeholder="开始"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="结束时间">
                <a-date-picker
                  format="YYYY-MM-DD"
                  placeholder="结束"
                  v-model="queryParam.endTime"
                  v-decorator="[ 'endTime', {rules: [{ required: true }], initialValue: endTime} ]"
                />
              </a-form-item>
            </a-col>
          </template>
          <!--<a-col :md="8" :sm="24">-->
          <!--<a-form-item :labelCol="labelCol" label="适用商户">-->
          <!--<a-select mode="multiple" placeholder="请选择适用商户" v-model="queryParam.merchantIds">-->
          <!--<a-select-option v-for="merchant in merchantList" :key="merchant.id">{{merchant.name}}-->
          <!--</a-select-option>-->
          <!--</a-select>-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button v-action:query style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
               <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :indentSize="40"
    >
       <span slot="memberId" slot-scope="text,record">
          <template>
             {{ text.memberId }}
        </template>
      </span>
      <span slot="payType" slot-scope="text,record">
          <template>
             {{ text | typeFilter }}
        </template>
      </span>
      <span slot="nick" slot-scope="text,record">
          <template>
             {{ record | nickFilter }}
        </template>
      </span>

      <span slot="memberState" slot-scope="text,record">
          <template>
             {{ text | memberStateFilter }}
        </template>
      </span>
      <span slot="userId" slot-scope="text,record">
          <template>
            {{record.userId}}
        </template>
      </span>
    </s-table>


  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import { selectPage } from '../../../api/dashboard/trade'
  import { selectPagePlus } from '../../../api/dashboard/trade'
  import { selectAllMerchant } from '../../../api/business/merchant'
  import { selectAllCompany } from '@/api/system/company'
  import { selectAllCategory } from '../../../api/business/category'
  import { MonthWeekdayFn as moment } from 'moment'

  export default {
    components: {
      STable
    },
    //--############  data() ###############-->
    data() {
      return {
        description: '',
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        merchantList: [],
        companys:[],
        categoryList: [],
        // 表头
        columns: [
          {
            title: '用户id',
            scopedSlots: { customRender: 'memberId' }
          },
          {
            title: '昵称',
            dataIndex: 'nickName',
            scopedSlots: { customRender: 'nick' }
          },
          {
            title: '商圈名',
            dataIndex: 'companyName'
          },
          {
            title: '商户名',
            dataIndex: 'merchantName'
          },
          {
            title: '类别名',
            dataIndex: 'categoryName'
          },

          {
            title: '是否会员',
            dataIndex: 'memberStatus',
            scopedSlots: { customRender: 'memberState' }
          },
          {
            title: '订单金额',
            dataIndex: 'totalFee',
            scopedSlots: { customRender: 'totalFee' }
          },
          {
            title: '支付完成时间',
            dataIndex: 'timeEnd'
          },
          {
            title: '支付方式',
            dataIndex: 'feeType',
            scopedSlots: { customRender: 'payType' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          if(parameter.beginTime!=null){
            this.parameter.beginTime = moment(parameter.beginTime).format('YYYY-MM-DD')
          }
          if(parameter.endTime!=null){
            this.parameter.endTime = moment(parameter.endTime).format('YYYY-MM-DD')
          }
          console.log(parameter)
          return selectPagePlus(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        },

        selectedRowKeys: [],
        selectedRows: [],

        beginTime: null,
        endTime: null,
      }
    },
    created() {
      // this.getAllMerchant()
      selectAllCompany().then(res => {
        this.companys = res.result
      })
    },
    //--############  data() ###############-->
    //--############  methods() ###############-->
    methods: {
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      handleProvinceChange(value) {
        this.selectAllMerchant(value)
        this.getAllCategory(value)
      },
      selectAllMerchant: function(companyId) {
        selectAllMerchant(companyId).then(res => {
          if (res.code === 200) {
            this.merchantList = res.result
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      },getAllCategory: function(companyId) {
        selectAllCategory(companyId).then(res => {
          if (res.code === 200) {
            this.categoryList = res.result
            this.defaultCategory = this.categoryList[0].id
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      },
    },
    filters: {
      typeFilter(state) {
        const statusMap = {
          1: '微信',
          2: '支付宝',
          3: '会员卡'
        }
        return statusMap[state]
      },
      memberStateFilter(memberStatus) {
        const statusMap = {
          1: '是',
          0: '否'
        }
        return statusMap[memberStatus]
      },
      nickFilter(record){
        let nickName;
        if(record.nickName!=null){
          nickName = record.nickName;
        }else{
          nickName = record.openId;
        }
        return nickName;
      }
    }

    //--############  methods() ###############-->
  }
</script>
